<template>
    <div class="page">
        <img
            class="logo-img"
            src="../assets/rank-pc-logo.png"
        />

        <div class="page-container">
            <div class="rank-left">
                <div class="rank-left-box">
                    <div class="rank-nav-box">
                        <div class="rank-nav-item-1">排名</div>
                        <div class="rank-nav-item-2">玩家昵称</div>
                        <div class="rank-nav-item-3">最佳得分</div>
                    </div>
                    <div class="rank-list-body">
                        <div
                            class="rank-list-box"
                            v-for="(item,index) in todayRank"
                            :key="index"
                        >
                            <div class="rank-list-item-1">
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-1.png"
                                    v-if="index==0"
                                />
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-2.png"
                                    v-if="index==1"
                                />
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-3.png"
                                    v-if="index==2"
                                />
                                {{index*1+1}}
                            </div>
                            <div class="rank-list-item-2 van-ellipsis">
                                <img
                                    class="rank-list-item-header"
                                    :src="item.user_list.heard_img"
                                />{{item.user_list.nickname}}
                            </div>
                            <div class="rank-list-item-3">{{item.user_score}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rank-right">
                <div class="rank-right-box">
                    <div class="rank-nav-box">
                        <div class="rank-nav-item-1">排名</div>
                        <div class="rank-nav-item-2">玩家昵称</div>
                        <div class="rank-nav-item-3">总得分</div>
                    </div>
                    <div class="rank-list-body">
                        <div
                            class="rank-list-box"
                            v-for="(item,index) in allRank"
                            :key="index"
                        >
                            <div class="rank-list-item-1">
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-1.png"
                                    v-if="index==0"
                                />
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-2.png"
                                    v-if="index==1"
                                />
                                <img
                                    class="rank-list-item-icon"
                                    src="../assets/rank-pc-3.png"
                                    v-if="index==2"
                                />
                                {{index*1+1}}
                            </div>
                            <div class="rank-list-item-2 van-ellipsis">
                                <img
                                    class="rank-list-item-header"
                                    :src="item.user_list.heard_img"
                                />{{item.user_list.nickname}}
                            </div>
                            <div class="rank-list-item-3">{{item.user_score}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            storeId: null,
            allRank: [],
            todayRank: [],
            timer: null
        }
    },
    created () {
        this.storeId = this.$getUrlKey('store_id')
    },
    mounted () {
        this.$request({
            url: '/api/Ranking/score_Ranking',
            method: 'post',
            params: {
                user_score: 1,
                page: 0,
                limit: 10
            }
        }).then(res => {
            this.allRank = res
        })
        // 今日排名
        this.$request({
            url: '/api/Ranking/today_Ranking',
            method: 'post',
            params: {
                user_score: 1,
                time: 'today',
                store_id: this.storeId,
                page: 0,
                limit: 10
            }
        }).then(res => {
            this.todayRank = res
        })
        this.timer = setInterval(() => {
            // 总排名
            this.$request({
                url: '/api/Ranking/score_Ranking',
                method: 'post',
                params: {
                    user_score: 1,
                    page: 0,
                    limit: 10
                }
            }).then(res => {
                this.allRank = res
            })
            // 今日排名
            this.$request({
                url: '/api/Ranking/today_Ranking',
                method: 'post',
                params: {
                    user_score: 1,
                    time: 'today',
                    store_id: this.storeId,
                    page: 0,
                    limit: 10
                }
            }).then(res => {
                this.todayRank = res
            })
        }, 10000)
    },
    beforeDestroy () {
        clearInterval(this.timer)
        this.timer = null
    }
}
</script>

<style <style lang="less" scoped>
.page {
    min-height: 100%;
    background-image: url("../assets/rank-pc-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.logo-img {
    display: block;
    width: 36.8%;
    margin: 0 auto;
    padding-top: 16px;
}

.page-container {
    display: flex;
    padding-top: 16px;
}

.rank-left,
.rank-right {
    flex: 1;
    padding: 0 20px;
}

.rank-left-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-image: url("../assets/rank-pc-left-bg-2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rank-right-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-image: url("../assets/rank-pc-right-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rank-nav-box {
    position: absolute;
    top: 20%;
    left: 5%;
    right: 5%;
    display: flex;
}

.rank-nav-item-1 {
    width: 60px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff8ab;
}

.rank-nav-item-2 {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff8ab;
}

.rank-nav-item-3 {
    width: 80px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff8ab;
}

.rank-list-body {
    position: absolute;
    top: 27%;
    left: 5%;
    right: 5%;
}

.rank-list-box {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.rank-list-item-1 {
    width: 60px;
    text-align: right;
    padding-right: 27px;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    box-sizing: border-box;
}

.rank-list-item-2 {
    display: flex;
    flex: 1;
    align-items: center;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    padding: 0 20px;
}

.rank-list-item-3 {
    width: 80px;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
}

.rank-list-item-icon {
    width: 17px;
    vertical-align: middle;
    margin-right: 2px;
}

.rank-list-item-header {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: sub;
    margin-right: 6px;
}
</style>

